<template>
  <div class="ranking">
    <!-- 排行榜 -->
    <div id="ranking">
      <div class="ranking">
        <van-tabs v-model="active" animated>
          <van-tab title="热销排行">
            <bestselling></bestselling>
          </van-tab>
          <van-tab title="飙升排行">
            <bestselling></bestselling>
          </van-tab>
          <van-tab title="完本排行">
            <bestselling></bestselling>
          </van-tab>
        </van-tabs>
      </div>

      <router-link to="/leader">
        <div class="line">
          <hr size="2" color="#efefef" />
        </div>
        <div class="more-title">更多排行<i></i></div>
      </router-link>
    </div>
  </div>
</template>

<script>
import bestselling from "../components/BestSelling.vue";

export default {
  data() {
    return {
      active: 0,
    };
  },
  components: {
    bestselling,
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-tab--active {
    color: #f54b41;
  }
  .van-tabs__line {
    // display: none;
    width: 33.33333%;
    // bottom: 20px;
  }
  .van-tabs__nav {
    background-color: transparent;
  }
  .van-tab__text {
    font-size: 15px;
  }
  .van-tabs__wrap {
    border-bottom: 1px solid #dedede;
  }
}
</style>